<template>
  <div class="Project">
      <div class="div-ul" v-for="(item,index) in ject" :key="index">
           <p style="font-size:22px">{{item.title}}</p>
           <ul class="box-ul">
             <li v-for="(b,i) in item.templates" :key="i">
               <router-link :to="{
               path:'/detailpage/'+b.designTemplateId}">
               <img :src="b.designTemplateImageUrl" alt="">
              </router-link>
             </li>
           </ul>
            <button class="btn" @click="btn(item.id,index)">查看更多</button>
      </div>
  </div>
</template>

<script>
export default {
   data() {
     return {
       ject:[],
       imm:[],
       flag:true,
     }
   },
   methods: {
     getMethods(){
       this.$ajax
        .get(
          `/abc/solutionSubject/themeDetail.do?_dataType=json&_dataClientType=3&client_type=40&themeId=${this.id}&templatePageSize=6`
        )
        .then((res) => {
          this.ject = res.data.body.data.theme.themeExtends;
          console.log(this.ject);
          let ims = []
        for(const i in this.ject){
            ims.push(1)
            console.log(i);
          }
          this.imm = ims
          console.log(this.imm);
        });
     },
      btn(item,index){
       let num = this.imm[index]
       num++
       this.imm[index] = num
       this.$ajax
        .get(
          `/abc/solutionSubject/themeExtend/template.do?_dataType=json&_dataClientType=3&client_type=40&themeExtendId=${item}&pageSize=6&pageNum=${this.imm[index]}`
        )
        .then((res) => {
          // this.ject[index].templates.push(...res.data.body.data.templates);
           this.ject[index].templates=this.ject[index].templates.concat(res.data.body.data.templates);
        });
   }
   },
   created() {
     this.id = this.$route.params.id;
     this.getMethods();
   },
}
</script>

<style scoped>
.Project{
  width: 102%;
  background-color: #ffffff;
}
   .box-ul{
     width: 100%;
     list-style: none;
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
   }
   .box-ul li{
     width: 28%;
     margin-bottom: 8px;
   }
   img{
     width: 100%;
     height: 100%;
   }
   .btn{
     width: 40%;
     height: 50px;
     line-height: 50px;
     background-color: #eee;
     border-radius: 20px;
     outline: none;
     border: none;
     margin: 15px 0px;
   }
</style>